<template>
	<view class="course-card u-m-r-20">
		<view class="u-flex">
			<image :src="img" class="course-img" mode="aspectFill" @click.stop="goCourseDetail()" />
			<view class="course-info">
				<text class="course-title">{{ title }}</text>
				<text class="course-time">{{ time }}</text>
				<view class="buy-btn u-flex u-flex-center u-flex-items-center" @click.stop="handleBtnClick()">
					{{ buttonType === 'study' ? '开始学习' : '立即购买' }}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		img: {
			type: String,
			default: '/static/logo.png'
		},
		courseId: Number,
		title: String,
		time: String,
		buttonType: {
			type: String,
			default: 'buy'
		}, // buy 或 study
	},
	data() {
		return {
			placeholderImg: '/static/placeholder.png'
		}
	},
	methods: {
		handleBtnClick() {
			console.log("===id",this.courseId);
			if(this.buttonType == 'study'){
				this.$emit("goStudy",this.courseId);
			}else{
				this.$emit("goBuy",this.courseId);
			}
		},
		goCourseDetail() {
			this.$emit("imgClick",this.courseId);
		}
	}
}
</script>
<style scoped>
.course-card {
	width:80%;
	display: inline-block;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 8rpx #eee;
	margin: 12rpx 0 20rpx;
	overflow: hidden;
	padding: 20rpx 20rpx;
}

.course-img {
	width: 220rpx;
	height: 140rpx;
	border-radius: 12rpx;
	margin-right: 20rpx;
}

.course-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.course-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #222;
}

.course-time {
	font-size: 22rpx;
	color: #888;
	margin: 8rpx 0;
}

.buy-btn {
	width: 150rpx;
	background: #2563eb;
	color: #fff;
	border-radius: 24rpx;
	font-size: 24rpx;
	padding: 8rpx 0;
	margin-top: 8rpx;
}
</style>